<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashboard</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<link rel="stylesheet" href="layui/css/layui.css">
	<link rel="stylesheet" href="static/css/global.css">
	<link rel="stylesheet" href="static/css/dashboard2.css">
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_978885_29cu5kb39fk.css">
</head>
<body>
	<div class="container">
		<div class="layui-row">
		    <div class="layui-col-xs5 dashboard-grid">
		     	<div class="vc topheader">
		     		<div class="left">
		     			<h3>
		     				90.91%
		     			</h3>
		     			<p>当前考核执行情况</p>
		     		</div>
		     		<div class="right">
		     			<div class="select dowebok">
						    <span class="placeholder">选择年/月/日处</span>
						    <ul>
						        <li>百度</li>
						        <li>谷歌</li>
						        <li>雅虎</li>
						        <li>新浪</li>
						    </ul>
						</div>
		     		</div>
		     	</div>
		    </div>
		  <!--   <div class="layui-col-xs5">
		      	<div class="dashboard-grid">
		      		
		      	</div>
		    </div> -->
	  	</div>
	  	<div class="layui-row dashboard-grid">
	  		<div class="layui-col-xs6">
				<div class="chart">
					<div class="title-icon">
		     			<p>共计55户单位</p>
		     		</div>
		     	</div>
		     	<div class="echarts-render-dw" id="echarts-render-dw"></div>
		    </div>
		    <div class="layui-col-xs6">
		     	<div class="chart">
					<div class="title-icon">
		     			<p>代签事宜</p>
		     		</div>

		     		<div class="todolist-table">
	      				<div class="table-header vc">
	      					<div class="column flex2">事件</div>
	      					<div class="column flex2">时间</div>
	      					<div class="column flex1 ar">操作</div>
	      				</div>
	      				<div class="header-list">
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      					<div class="vc">
	      						<div class="column-item flex2 iconbefore">1248197</div>
	      						<div class="column-item flex2">2018-09-07 12:00</div>
	      						<div class="column-item flex1">22:02:30</div>
	      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
	      					</div>
	      				</div>
	      			</div>
		     	</div>
		    </div>
	  	</div>
	  	<div class="layui-row dashboard-grid">
	  		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6  kh-list">
      			<div class="title-icon">
      				<p>最新考核结果排名</p>
      			</div>
      			<div class="vc">
      				<div class="left">
      					<div class="header-kh">
		      				<h2>前20</h2>名
		      			</div>
		      			<div class="rank-list">
		      				<ul class="leftpart">
		      					<li><span>No.1</span><p>杭州市单位名称</p></li>
		      					<li><span>No.2</span><p>杭州市单位名称</p></li>
		      					<li><span>No.3</span><p>杭州市单位名称</p></li>
		      					<li><span>No.4</span><p>杭州市单位名称</p></li>
		      					<li><span>No.5</span><p>杭州市单位名称</p></li>
		      					<li><span>No.6</span><p>杭州市单位名称</p></li>
		      					<li><span>No.7</span><p>杭州市单位名称</p></li>
		      					<li><span>No.8</span><p>杭州市单位名称</p></li>
		      					<li><span>No.9</span><p>杭州市单位名称</p></li>
		      					<li><span>No.10</span><p>杭州市单位名称</p></li>
		      				</ul>
		      				
		      				<ul class="rightpart">
		      					<li><span>No.11</span><p>杭州市单位名称</p></li>
		      					<li><span>No.12</span><p>杭州市单位名称</p></li>
		      					<li><span>No.13</span><p>杭州市单位名称</p></li>
		      					<li><span>No.14</span><p>杭州市单位名称</p></li>
		      					<li><span>No.15</span><p>杭州市单位名称</p></li>
		      					<li><span>No.16</span><p>杭州市单位名称</p></li>
		      					<li><span>No.17</span><p>杭州市单位名称</p></li>
		      					<li><span>No.18</span><p>杭州市单位名称</p></li>
		      					<li><span>No.19</span><p>杭州市单位名称</p></li>
		      					<li><span>No.20</span><p>杭州市单位名称</p></li>
		      				</ul>
		      				<div class="slide ac">
		      					<i class="iconfont icon-fanhui"></i>
		      					<i class="iconfont icon-gengduo active"></i>
		      				</div>
		      			</div>
      				</div>
      				<div class="right">
      					<div class="header-kh">
		      				<h2>倒数20</h2>名
		      			</div>
		      			<div class="rank-list">
		      				<ul class="leftpart">
		      					<li><span>No.1</span><p>杭州市单位名称</p></li>
		      					<li><span>No.2</span><p>杭州市单位名称</p></li>
		      					<li><span>No.3</span><p>杭州市单位名称</p></li>
		      					<li><span>No.4</span><p>杭州市单位名称</p></li>
		      					<li><span>No.5</span><p>杭州市单位名称</p></li>
		      					<li><span>No.6</span><p>杭州市单位名称</p></li>
		      					<li><span>No.7</span><p>杭州市单位名称</p></li>
		      					<li><span>No.8</span><p>杭州市单位名称</p></li>
		      					<li><span>No.9</span><p>杭州市单位名称</p></li>
		      					<li><span>No.10</span><p>杭州市单位名称</p></li>
		      				</ul>
		      				<ul class="rightpart">
		      					<li><span>No.11</span><p>杭州市单位名称</p></li>
		      					<li><span>No.12</span><p>杭州市单位名称</p></li>
		      					<li><span>No.13</span><p>杭州市单位名称</p></li>
		      					<li><span>No.14</span><p>杭州市单位名称</p></li>
		      					<li><span>No.15</span><p>杭州市单位名称</p></li>
		      					<li><span>No.16</span><p>杭州市单位名称</p></li>
		      					<li><span>No.17</span><p>杭州市单位名称</p></li>
		      					<li><span>No.18</span><p>杭州市单位名称</p></li>
		      					<li><span>No.19</span><p>杭州市单位名称</p></li>
		      					<li><span>No.20</span><p>杭州市单位名称</p></li>
		      				</ul>
		      				<div class="slide ac">
		      					<i class="iconfont icon-fanhui"></i>
		      					<i class="iconfont icon-gengduo active"></i>
		      				</div>
		      			</div>
      				</div>
      			</div>
      			
      		</div>
      		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6  fit-screen">
      			<div class="title-icon">
      				<p>最差指标项列表</p>
      			</div>
      			<div class="progess-item">
      				<ul>
      					<li class="vc">
      						<span class="pr-w1">NO.1</span>
      						<div class="full-progess">
      							<div class="progess-now" style="background-color: #cf4049;width: 90%;"></div>
      						</div>
      						<span class="pr-w3">占比20% 指标描述</span>
      					</li>
      					<li class="vc">
      						<span class="pr-w1">NO.2</span>
      						<div class="full-progess">
      							<div class="progess-now" style="background-color: #e88d3d;width: 80%;"></div>
      						</div>
      						<span class="pr-w3">占比20% 指标描述</span>
      					</li>
      					<li class="vc">
      						<span class="pr-w1">NO.3</span>
      						<div class="full-progess">
      							<div class="progess-now" style="background-color: #ddd846;width: 70%;"></div>
      						</div>
      						<span class="pr-w3">占比20% 指标描述</span>
      					</li>
      					<li class="vc">
      						<span class="pr-w1">NO.4</span>
      						<div class="full-progess">
      							<div class="progess-now" style="background-color: #58e5a3;width: 60%;"></div>
      						</div>
      						<span class="pr-w3">占比20% 指标描述</span>
      					</li>
      					<li class="vc">
      						<span class="pr-w1">NO.5</span>
      						<div class="full-progess">
      							<div class="progess-now" style="background-color: #b6daea;width: 50%;"></div>
      						</div>
      						<span class="pr-w3">占比20% 指标描述</span>
      					</li>
      				</ul>
      			</div>
      		</div>
      		<div class="layui-col-md2">
      		</div>
	  	</div>
	</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="static/js/echarts.common.min.js"></script>
<script src="layui/layui.js"></script>
<script>
layui.use(['layer', 'form', 'element'], function(){
	console.log(window)
  	var layer = layui.layer, form = layui.form, element = layui.element

  	var mockData = {
  		total: 100, // 总数
  		complete: 90,// 已考核单位数
  	}
  	var source = [];
  	function initMockData(mock) {
  		for(var item in mock) {
  			console.log(item)
  			var h = {}
  			h.name = item
  			h.value = mock[item]
  			h.icon = 'rect'
  			source.push(h)
  		}
  	}
  	initMockData(mockData)
  	console.log(source)
  	var option = {
	    title: {
	        text: (mockData.complete / mockData.total * 100 ).toFixed(2) + '%',
	        x: '11%',
	        y: '50%',
	        textStyle: {
	            fontWeight: 'normal',
	            color: '#fff',
	            fontSize: '25'
	        },
	        itemGap: 5,
	        subtext:' 执行考核进度',
	        // padding: 0
	    },
	    color: ['rgba(176, 212, 251, 1)'], 
	    legend: [{
	    		orient: 'vertical',
	    		left: 250,
	    		y: '50%',
	    		icon: 'rect',
	            textStyle: {
	                color: '#cddafd',
	                fontSize: 14,
	                width: 120,
	                height: 20,
	            },
	            itemWidth: 15,
	            itemHeight: 15,
	            itemGap: 20,
	            data: source,
	            formatter: function(name) {
	            	// console.log('name',name)

	            	if (name == 'total') {
	            		return mockData[name] - mockData.complete + '户/未考核单位'
	            	}else {
	            		return mockData[name] + '户/已考核单位'
	            	}
	            	
	            }
	    	}],
	    series: [{
	        type: 'pie',
	        clockWise: false,
	        center: ['20%','60%'],
	        radius: ['45%', '70%'],
	        startAngle: -270,
	        itemStyle: {
	            normal: {
	                label: {
	                    show: false
	                },
	                labelLine: {
	                    show: false
	                }
	            }
	        },
	        hoverAnimation: false,
	        data: [{
	        	name: 'complete',
	            value: mockData.complete,
	            itemStyle: {
	                normal: {
	                    color: '#00d4da',
	                    label: {
	                        show: false
	                    },
	                    labelLine: {
	                        show: false
	                    }
	                } 
	            }
	        }, {
	        	name: 'total',
	            value: mockData.total - mockData.complete,
	            itemStyle: {
	                normal: {
	                    color: '#00a1ff',
	                }
	            }
	        }]
	    }]
	} 

  	var myChart = echarts.init(document.getElementById('echarts-render-dw'))
  	$(function(){
  		// select 事件
		$('.select').on('click', '.placeholder', function(e) {
		    var parent = $(this).closest('.select');
		    if (!parent.hasClass('is-open')) {
		        parent.addClass('is-open');
		        $('.select.is-open').not(parent).removeClass('is-open');
		    } else {
		        parent.removeClass('is-open');
		    }
		    e.stopPropagation();
		}).on('click', 'ul>li', function() {
		    var parent = $(this).closest('.select');
		    parent.removeClass('is-open').find('.placeholder').text($(this).text());
		});
		 
		$('body').on('click', function() {
		    $('.select.is-open').removeClass('is-open');
		});

		$('.slide .iconfont.icon-gengduo').on('click',function(){
			var ulleft = $(this).parent().parent().find('.leftpart')
			var ulright = $(this).parent().parent().find('.rightpart')
			console.log(ulleft)
			console.log($(this).hasClass('active'))
			if ($(this).hasClass('active')) {
				ulleft.addClass('left')
				ulright.addClass('right')
				$(this).removeClass('active')
				$(this).siblings().addClass('active')
			}
		})
		$('.slide .iconfont.icon-fanhui').on('click',function(){
			var ulleft = $(this).parent().parent().find('.leftpart')
			var ulright = $(this).parent().parent().find('.rightpart')
			console.log(ulleft)
			console.log($(this).hasClass('active'))
			if ($(this).hasClass('active')) {
				ulleft.removeClass('left')
				ulright.removeClass('right')
				$(this).removeClass('active')
				$(this).siblings().addClass('active')
			}
		})

		myChart.setOption(option);
  	})

});
</script>
</html>